import React from "react";

/**
 * 组件卸载阶段，要执行的钩子函数
 *
 * componentWillUnmount
 */
class App extends React.Component {
  constructor(props) {
    super(props);
    console.log("1. constructor()");
    // 设置组件状态
    this.state = {
      time: new Date().toLocaleTimeString(),
    };
  }

  render() {
    console.log("2. render");
    return (
      <div>
        <h2>当前时间是</h2>
        <h2>{this.state.time}</h2>
      </div>
    );
  }

  componentDidMount() {
    console.log("3. componentDidMount()");
    this.timerId = setInterval(() => {
      this.setState({
        time: new Date().toLocaleTimeString(),
      });
    }, 1000);
  }

  componentDidUpdate() {
    console.log("4. componentDidUpdate()");
  }

  componentWillUnmount() {
    clearInterval(this.timerId);
    console.log("子组件 5. componentWillUnmount()");
  }
}

export default App;
